<template>
  <div>
    <!-- 移动端nav -->
    <div class="model">
      <img src="@/assets/images/LogoWhite.png" alt="" />
      <i class="left el-icon-s-fold" @click="drawer = true"></i>
    </div>
    <el-drawer
      :visible.sync="drawer"
      :with-header="false"
      size="65%"
      custom-class="el_drawer"
    >
      <img src="@/assets/images/LogoWhite.png" alt="" />
      <el-row class="top" :gutter="10">
        <el-col
          :span="12"
          v-for="(item, index) in list1"
          :key="index"
          class="items"
        >
          <a
            :href="item.path"
            :target="item.path == 'javascript:void(0);' ? '' : '_blank'"
          >
            <i :class="item.icon"></i>
            <h1>{{ item.name }}</h1>
          </a>
        </el-col>
      </el-row>
      <el-row class="mid" :gutter="10">
        <el-col
          :span="12"
          v-for="(item, index) in list2"
          :key="index"
          class="items"
        >
          <div @click="handleMid(item)">
            <h1>{{ item.name }}</h1>
          </div>
        </el-col>
      </el-row>
      <el-row class="bot" :gutter="10">
        <el-col
          :span="12"
          v-for="(item, index) in list3"
          :key="index"
          class="items"
        >
          <a
            :href="item.path"
            :target="item.path == 'javascript:void(0);' ? '' : '_blank'"
          >
            <i :class="item.icon"></i>
            <h1>{{ item.name }}</h1>
          </a>
        </el-col>
      </el-row>
      <el-drawer
        title="innerDrawer"
        :with-header="false"
        :append-to-body="true"
        custom-class="innerDrawer"
        :visible.sync="innerDrawer"
      >
        <div style="width:100%;height:100%;position:relative;">
          <i class="loading el-icon-loading" v-if="isLoading"></i>
          <ul
            v-if="innerDrawerList.length > 0"
            style="height:100vh;overflow:auto"
          >
            <li v-for="(item, index) in innerDrawerList" :key="index">
              <a :href="item.path">
                {{ item.name }}
              </a>
            </li>
          </ul>
          <div class="noData" v-else>暂无数据</div>
        </div>
      </el-drawer>
    </el-drawer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      drawer: false,
      innerDrawer: false,
      innerDrawerList: [],
      isLoading: false,
      list1: [
        {
          name: "ENGLISH",
          icon: "el-icon-set-up",
          path: "javascript:void(0);"
        },
        {
          name: "院系设置",
          icon: "el-icon-office-building",
          path: "https://www.sjtu.edu.cn/#"
        },
        {
          name: "机构设置",
          icon: "el-icon-school",
          path: "https://www.sjtu.edu.cn/jgsz/"
        },
        {
          name: "交大校历",
          icon: "el-icon-date",
          path: "javascript:void(0);"
        },
        {
          name: "交大地图",
          icon: "el-icon-location-information",
          path: "https://map.sjtu.edu.cn/"
        },
        {
          name: "视觉交大",
          icon: "el-icon-view",
          path: "http://vs.sjtu.edu.cn/"
        }
      ],
      list2: [
        {
          name: "关于交大",
          children: [
            [
              {
                name: "学校简介",
                path: "https://www.sjtu.edu.cn/xxjj/index.html"
              },
              {
                name: "交大领导",
                path: "https://www.sjtu.edu.cn/jdld/index.html"
              },
              {
                name: "交大年报",
                path: "https://www.sjtu.edu.cn/jdnb/index.html"
              }
            ],
            [
              {
                name: "历史沿革",
                path: "https://www.sjtu.edu.cn/lsyg/index.html"
              },
              {
                name: "历任领导",
                path: "https://www.sjtu.edu.cn/lrld/index.html"
              },
              {
                name: "数据统计",
                path: "https://www.sjtu.edu.cn/sjtj/index.html"
              }
            ]
          ]
        },
        {
          name: "人才培养",
          children: [
            [
              {
                name: "本科生培养",
                path: "http://www.jwc.sjtu.edu.cn/"
              },
              {
                name: "本科生选课",
                path: "http://electsys.sjtu.edu.cn/"
              },
              {
                name: "本科生招生",
                path: "http://zsb.sjtu.edu.cn/"
              },
              {
                name: "等级考试",
                path: "http://ks.sjtu.edu.cn/"
              },
              {
                name: "创新实践",
                path: "http://uitp.sjtu.edu.cn/"
              }
            ],
            [
              {
                name: "研究生培养",
                path: "https://www.sjtu.edu.cn/lsyg/index.html"
              },
              {
                name: "研究生选课",
                path: "http://www.yjs.sjtu.edu.cn/ssfw/login.jsp"
              },
              {
                name: "研究生招生",
                path: "http://yzb.sjtu.edu.cn/"
              },
              {
                name: "招生简章",
                path: "http://yzb.sjtu.edu.cn/zsjz.htm"
              },
              {
                name: "综合服务",
                path: "http://www.gs.sjtu.edu.cn/index/yjsjyfwzx.htm"
              }
            ],
            [
              {
                name: "学生就业",
                path: "http://www.job.sjtu.edu.cn/"
              },
              {
                name: "海外访学",
                path: "http://studyabroad.sjtu.edu.cn/"
              },
              {
                name: "通识MOOC",
                path: "http://sjtu.fanya.chaoxing.com/portal"
              },
              {
                name: "学生创新",
                path: "http://engtc.sjtu.edu.cn/"
              },
              {
                name: "实践教学示范中心",
                path: "https://www.sjtu.edu.cn/syjxsfzx/index.html"
              }
            ],
            [
              {
                name: "教学信息服务网",
                path: "http://electsys.sjtu.edu.cn/"
              },
              {
                name: "评教与调查统计",
                path: "http://pingjiao.sjtu.edu.cn/"
              },
              {
                name: "教学发展",
                path: "http://ctld.sjtu.edu.cn/"
              },
              {
                name: "教学发展",
                path: "http://ctld.sjtu.edu.cn/"
              },
              {
                name: "教学发展",
                path: "http://ctld.sjtu.edu.cn/"
              }
            ]
          ]
        },
        {
          name: "师资建设",
          children: [
            [
              {
                name: "两院院士",
                path: "https://www.sjtu.edu.cn/zgkxyys/index.html"
              },
              {
                name: "人事管理",
                path: "http://rsc2.sjtu.edu.cn/HR/UI/SystemDefault.aspx"
              }
            ],
            [
              {
                name: "杰出人才",
                path: "https://www.sjtu.edu.cn/jcrc/index.html"
              },
              {
                name: "人才招聘",
                path: "http://join.sjtu.edu.cn/"
              }
            ]
          ]
        },
        {
          name: "科学研究",
          children: [
            [
              {
                name: "研究院",
                path: "https://www.sjtu.edu.cn/yjy/index.html"
              },
              {
                name: "国家级科研平台",
                path: "https://www.sjtu.edu.cn/gjjkypt/index.html"
              },
              {
                name: "智库机构",
                path: "https://www.sjtu.edu.cn/zkjg/index.html"
              }
            ],
            [
              {
                name: "科研管理系统",
                path: "http://ky.sjtu.edu.cn/epstar/login/index.jsp"
              },
              {
                name: "省部级科研平台",
                path: "https://www.sjtu.edu.cn/sbjkypt/index.html"
              },
              {
                name: "上海交大学报",
                path: "https://www.sjtu.edu.cn/shjdxb/index.html"
              }
            ]
          ]
        },
        {
          name: "全球交大",
          children: [
            [
              {
                name: "交流动态",
                path: "http://global.sjtu.edu.cn/NewsCenter/NewsList?type=1"
              }
            ],
            [
              {
                name: "留学交大",
                path: "http://isc.sjtu.edu.cn/"
              }
            ]
          ]
        },
        {
          name: "大学文化",
          children: [
            [
              {
                name: "文明在线",
                path: "http://wm.sjtu.edu.cn/"
              }
            ],
            [
              {
                name: "图书馆",
                path: "http://www.lib.sjtu.edu.cn/"
              }
            ]
          ]
        }
      ],
      list3: [
        {
          name: "访客",
          icon: "iconfont icon-fangke",
          path: "https://www.sjtu.edu.cn/fk/index.html"
        },
        {
          name: "学生",
          icon: "iconfont icon-xuesheng",
          path: "https://www.sjtu.edu.cn/xs/index.html"
        },
        {
          name: "教师",
          icon: "iconfont icon-jiaoshi",
          path: "https://www.sjtu.edu.cn/js/index.html"
        },
        {
          name: "校友",
          icon: "iconfont icon-xiaoyou",
          path: "https://www.sjtu.edu.cn/xy/index.html"
        }
      ]
    };
  },
  methods: {
    handleMid(items) {
      console.log(items);
      this.innerDrawer = true;
      const { children } = items;
      console.log(children);
      children.forEach(item => {
        item.forEach(its => {
          this.innerDrawerList.push(its);
        });
      });
    }
  }
};
</script>

<style scoped lang="scss">
.model {
  height: 60px;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: $base-color;
  z-index: 999;
  display: flex;
  padding: 0 15px;
  align-items: center;
  justify-content: space-between;
  img {
    width: 40%;
    object-fit: contain;
    // height: auto;
  }
  i {
    font-size: 35px;
    color: #fff;
    cursor: pointer;
  }
}
/deep/ .el_drawer {
  background-image: url("../assets/images/sjtudoorBG.jpg");
  background-repeat: no-repeat;
  background-size: auto 100%;
  padding: 15px;
  background-position: 50% 50%;

  img {
    width: 60%;
    display: block;
    margin: 0 auto 15px auto;
  }
  .top,
  .mid,
  .bot {
    border-bottom: 1px dashed #fff;
    margin-bottom: 15px;
  }
  .items {
    margin-bottom: 10px;
    a {
      border: 1px solid #fff;
      display: block;
      font-size: 14px;
      color: #fff;
      text-align: center;
      padding: 15px;
      i {
        font-size: 24px;
        display: block;
        text-align: center;
        margin-bottom: 10px;
      }
      h1 {
        font-weight: 500;
      }
    }
  }
  .mid {
    .items {
      > div {
        border: 1px solid #fff;
        font-size: 14px;
        color: #fff;
        text-align: center;
        padding: 15px;
        i {
          font-size: 24px;
          display: block;
          text-align: center;
          margin-bottom: 10px;
        }
        h1 {
          font-weight: 500;
        }
      }
    }
  }
}
/deep/ .innerDrawer {
  background-color: #f8f2ea;
  ul {
    li {
      a {
        display: block;
        padding: 15px 0;
        text-align: center;
        border-bottom: 1px solid #eee;
      }
    }
  }
  .noData {
    text-align: center;
    padding-top: 30px;
  }
  .loading {
    position: absolute;
    font-size: 30px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}
</style>
